<template>

	<view>
		<!-- <view class="tops">我是小记者第二十二期主题活动学习内容</view> -->

		<view class="uli">
			<view class="list" v-for="(item,idx) in readList" :key="idx" @click="details(item)">
				<image :src="item.cover"></image>
				<view>
					<view class="name">{{item.title}}</view>
					<view class="content">{{item.description}}</view>
				</view>

				<view :class="item.state?'none':'status'">{{item.state?'已学习':'未学习'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {activityList,post} from '@/utils/interface.js'
	
export default {
	data(){
		return {
			readList:[]
		}
	},
	methods: {
		details(item) {
			uni.navigateTo({
				url: '/pages/me/study-details?id='+item.id
			});
		},
		task_read(id,aid){
			activityList({method:"activities.task_read",task_id:id,token:uni.getStorageSync('userToken'),activity_id:aid}).then(res=>{
				
				let progress = JSON.parse(res.data.progress)
				res.data.list.map(item=>{
					for(var i in progress){
						progress[i].done.map(j=>{
							if(item.id==j){
								item.state = true
							}
						})
					}
				})
				
				this.readList = res.data.list
			})
		}
	},
	onLoad(options){
		
		console.log(options)
		this.task_read(options.taskId,options.activityId)
	}
};
</script>

<style>

.tops {
	color: #525257;
	font-size: 24upx;
	text-align: center;
}
.list {
	display: flex;
	align-items: center;
	padding: 0 60upx;
	position: relative;
	margin-top: 48upx;
}
.list image {
	width: 175upx;
	height: 160upx;
	border-radius: 7upx;
	background: red;
	margin-right: 36upx;
}
.status {
	position: absolute;
	right: 60upx;
	top: 0;
	color: #58db77;
	font-size: 28upx;
	line-height: 40upx;
}
.none{
	color: #6D6D6D;
	position: absolute;
	right: 60upx;
	top: 0;
	font-size: 28upx;
	line-height: 40upx;
}
.name {
	font-size: 28upx;
	line-height: 40upx;
	width: 262upx;
	color: #525257;
	font-weight: bold;
}
.content {
	color: #a8a8ab;
	font-size: 24upx;
	margin-top: 25upx;
	text-overflow: -o-ellipsis-lastline;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	width: 415upx;
}


</style>
